<!--人事档案详情-->
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>{{ employeeFles?employeeFles.name:'' }}-人事档案详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="archives-body">
          <div class="archives-body-left">
            <div class="archives-body-left-header" v-if="employeeFles">
              <img :src="httpOption+employeeFles.pic" alt="" v-if="employeeFles.pic">
              <img src="@/assets/imageAdmin/defultimg.jpg" alt="" v-else>
              <p class="archives-body-left-name">{{ employeeFles.name }}</p>
              <div class="archives-body-left-time">
                <p><span>岗位:</span>  {{ employeeFles.job }}</p>
                <p><span>入职时间：</span>{{ employeeFles.create_time }}</p>
              </div>
              <div class="hr-line"></div>
              <p class="archives-body-left-title">联系方式</p>
              <div class="archives-body-left-phone-line">
                <i class="iconfont iconxiaoxi2"></i>{{ employeeFles.mobile_phone }}
              </div>
              <div class="mt-30">
                <el-button type="primary" plain size="small" @click="RewardVisible=true">新增奖惩</el-button>
                <el-button type="primary" plain size="small" @click="contractVisible=true">新增合同</el-button>
              </div>
            </div>
          </div>
          <div class="archives-body-right">
            <div class="archives-body-right-header">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基础信息" name="first"></el-tab-pane>
                <el-tab-pane label="入职审核" name="second"></el-tab-pane>
                <el-tab-pane label="奖惩记录" name="Reward"></el-tab-pane>
                <el-tab-pane label="合同记录" name="contract"></el-tab-pane>
              </el-tabs>
            </div>

            <div class="archives-body-right-body">
              <info v-if="activeName=='first'" :employeeFles="employeeFles"></info>
              <Timeline v-if="activeName=='second'" :resumeDetail="resumeDetail" :tableHeight="tableHeight" @getDetailLine="getDetailLine"></Timeline>
              <Reward v-if="activeName=='Reward'" :resumeDetail="resumeDetail" :tableHeight="tableHeight" @getDetailLine="getDetailLine" ref="backBookChange" :archives_id="archivesId"></Reward>
              <contract v-if="activeName=='contract'"  :archives_id="archivesId" ref="contractChange"  :tableHeight="tableHeight" ></contract>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
      </div>
    </div>
    <!--      queryType 1 查看面试审核详情， 2 查看考核结果详情 inType 档案查看-->
    <AppraisalPreview :queryType="queryType" :resumeId="resumeId" :visible.sync="PreviewVisible" inType="archives"></AppraisalPreview>
    <addReward :visible.sync="RewardVisible" :id="archivesId" @addInit="addInit"></addReward>
    <addContract :visible.sync="contractVisible" :id="archivesId" @addInit="addInit"></addContract>
  </div>
</template>

<script>
import info from "./archivesManage/info";
import Timeline from "./archivesManage/Timeline";
import AppraisalPreview from "./AppraisalPreview";
import Reward from "./archivesManage/Reward";
import addReward from "./archivesManage/addReward";
import addContract from "./archivesManage/addContract";
import contract from "./archivesManage/contract";

export default {
  props: ['visible', 'archivesId'],
  components: {
    addContract,
    contract,
    info,
    Timeline,
    AppraisalPreview,
    Reward,
    addReward
  },
  data() {
    return {
      contractVisible: false,
      RewardVisible:false,
      dialogVisible: false,
      activeName: 'first',
      employeeFles: null,
      resumeDetail:null,
      tableHeight: 0,
      PreviewVisible: false,
      queryType: 0,
      resumeId: 0
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if(this.visible){
        let n = this;
        this.$nextTick(() => {
          let height = n.$refs.dialogBox.offsetHeight;  //top 50 1 search 50 page 50 10 footer 50 1
          n.tableHeight = height - (51 + 46 + 10 + 40+50+20)
        })
        this.InitFn();
      }else{
        this.activeName = 'first';
        this.resumeDetail = null;
      }
    }
  },
  created() {

  },
  methods: {
    async InitFn() {
      console.log('请求档案信息：')
      let data = await this.$fetch(this.api.archives.edit, {id: this.archivesId});
      console.log('data:', data)
      if (!data.code) {
        data.vo.create_time = data.vo.create_time.split(' ')[0];
        this.employeeFles = this.getJson(data.vo);
        this.resumeId = data.vo.resume_id
        this.getData()
      }
    },
    getData() {
      this.getResumeDetail()
    },
    addInit(){
      if(this.activeName==='Reward'){
        this.$refs.backBookChange.BatchOperation()
      }
      if(this.activeName==='contract'){
        this.$refs.contractChange.BatchOperation()
      }
    },
    // 获取简历时间线
    async getResumeDetail() {
      let data = await this.$fetch(this.api.recruit.vitae.edit, {id:  this.resumeId});
      if (!data.code) {
        if (data.vo.statuss >= 3) {
          let a = [];
          for (let i in data.vo.recruite.interview_user) {
            a.push(data.vo.recruite.interview_user[i].realname)
          }
          data.vo.interview_user = a.join(','); // 面试审核人只能在状态大于3时
        }
        if (data.vo.statuss >= 5) {
          let a = [];
          for (let i in data.vo.recruite.employ_user) {
            a.push(data.vo.recruite.employ_user[i].realname)
          }
          data.vo.assessment_user = a.join(','); // 面试审核人只能在状态大于3时
        }
        this.resumeDetail = this.getJson(data.vo);
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getDetailLine(option){
      this.queryType = option;
      this.resumeId =  this.resumeId;
      this.PreviewVisible = true;
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  background: #e5f1ff;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 20px 0 5px;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.resruitment-title p {
  flex: 1;
}

.archives-body-right-header .el-tabs__header {
  margin-bottom: 0 !important;
}

.archives-body {
  display: flex;
}

.archives-body-left {
  width: 240px;
  /*height: 490px;*/
  padding: 0 30px;
  margin-right: 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px #d8d8d8;
}

.archives-body-left-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
}

.archives-body-left-header img {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 2px 4px #ddd;
}

.archives-body-left-name {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.archives-body-left-time {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  flex-direction: column;
}

.archives-body-left-time p {
  flex: 1;
  margin-bottom: 5px;
}

.archives-body-left-time span {
  color: #777;
}

.archives-body-left-title {
  width: 100%;
  padding-left: 10px;
}

.archives-body-left-phone-line {
  border: 1px solid #eaeaea;
  padding: 8px 16px;
  margin-top: 20px;
  border-radius: 2px;
}

.archives-body-right {
  flex: 1;
}

.archives-body-right .archives-body-right-header {
  background: #fff;
  border-radius: 4px;
  padding: 6px 15px 1px;
  margin-bottom: 10px;
  box-shadow: 0 0 10px #d8d8d8;
}

.archives-body-right .archives-body-right-body {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px #d8d8d8;
  padding: 20px;
}

.hr-line {
  height: 1px;
  background: #eee;
  width: 100%;
  margin: 40px 0;
}
</style>


